import React, { useEffect, useState } from 'react'
import {
    ListContainer,
    List,
    ListItem
} from './style'
import { getCount } from '../../api/utils'
import LazyLoad from 'react-lazyload'

function RecommendList(props) {

    const { recommendList } = props

    return (
        <ListContainer>
            <h1 className="title">推荐歌单</h1>
            <List>
                {
                    recommendList.map((item, index) => {
                        return (
                            <ListItem key={item.id + index}>
                                <div className="img_wrapper">
                                    <div className="decorate"></div>
                                    <LazyLoad placeholder={<img width="100%" height="100%" src={require('./music.png')} alt="music"/>}>
                                        <img src={item.picUrl + '?param=300*300'} width="100%" height="100%" alt="music"/>
                                    </LazyLoad>
                                    <div className="play_count">
                                        <span className="icon iconfont">&#xe885;</span>
                                        <span>{ getCount(item.playCount) }</span>
                                    </div>
                                    
                                </div>
                                <div className="desc">{item.name}</div>
                            </ListItem>
                        )
                    })
                }
            </List>
        </ListContainer>
    )
}

export default React.memo(RecommendList)